<template>
  <div class="attr">
    <el-tabs v-model="activeName">
      <el-tab-pane label="景点基础信息管理" name="info">
        <panel @add="addUser" @search="search"></panel>
        <attrList
          :attrList="attrList"
          class="list"
          @change="change($event); dialogFormVisible = true"
          @toPhotoList="getPhoto($event);showPhotoList = true"
          @refresh="refresh"
        ></attrList>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="Number(page_num)"
          @current-change="handleCurrentChange"
          class="pagination"
        ></el-pagination>
        <attrUpdate
          :dialogFormVisible="dialogFormVisible"
          @closeDialog="dialogFormVisible = false"
          :toChangeRow="toChangeRow"
          @refresh="refresh"
        ></attrUpdate>
        <attrAdd
          :dialogFormVisible="showAddDialog"
          @closeDialog="showAddDialog=false"
          @refresh="refresh"
        ></attrAdd>
        <attrPhotoList
          :dialogTableVisible="showPhotoList"
          :photoList="photoList"
          @closeDialog="showPhotoList=false"
          @refreshaPhoto="getPhoto($event)"
        ></attrPhotoList>
      </el-tab-pane>
      <el-tab-pane label="景点预约管理" name="info2">
        <attrAppList
        ></attrAppList>
      </el-tab-pane>
      <!-- <el-tab-pane label="角色管理" name="info3">3</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="info4">4</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import attrList from "@/components/attraction/attrList";
import attrAppList from "@/components/attraction/attrAppList";
import panel from "@/components/panel";
import attrUpdate from "@/components/attraction/attrUpdate";
import attrAdd from "../../components/attraction/attrAdd";
import attrPhotoList from "../../components/attraction/attrPhotoList";

export default {
  name: "Attraction",
  data() {
    return {
      activeName: "info",
      attrList: [],
      page_now: 1,
      total: undefined,
      page_num: undefined,
      toChangeIndex: undefined,
      dialogFormVisible: false,
      toChangeRow:{
        attrId: undefined,
        title: '',
        content: '',
        path: '',
        viewed: undefined,
        price: undefined,
        priceDiscount: undefined,
        stars: undefined,
        sort: undefined,
        status: undefined
      },
      // toChangeRow: null,
      searchVal: "",
      showAddDialog: false,
      showPhotoList: false,
      photoList: {},
      keyword: undefined
    };
  },
  components: {
    attrList,
    panel,
    attrUpdate,
    attrAdd,
    attrPhotoList,
    attrAppList
  },
  methods: {
    addUser: function() {
      this.showAddDialog = true;
    },
    search: async function(val) {
      this.searchVal = val.trim();
      let data;
      if (val.trim() == "") {
        data = await this._axios
          .get(`/ycwAdmin/attraction/getList?page=1&pageTotal=3`)
          .then(data => data.data.data);
      } else {
        data = await this._axios
          .get(`/ycwAdmin/attraction/getList?page=1&pageTotal=3&keyword=${val}`)
          .then(data => data.data.data);
      }
      if (!Array.isArray(data)) {
        this.total = data.allPage * 3;
        this.attrList = data.attrList;
        this.page_num = 3;
      } 
      else{
          this.attrList = data;
      }
      console.log(data);
    },
    handleCurrentChange: async function(val) {
      let data;
      if (this.searchVal == "") {
        data = await this._axios
          .get(`/ycwAdmin/attraction/getList?page=${val}&pageTotal=3`)
          .then(data => data.data.data);
      } else {
        data = await this._axios
          .get(
            `/ycwAdmin/attraction/getList?page=${val}&pageTotal=3&keyword=${this.searchVal}`
          )
          .then(data => data.data.data);
      }
      this.attrList = data.attrList;
      this.page_now = val;
    },
    change: function(obj) {
      // console.log(index);
      this.toChangeRow = {
        attrId: obj.id,
        title: obj.title,
        content: obj.content,
        path: obj.main_img,
        viewed: obj.viewed,
        price: obj.price,
        priceDiscount: obj.price_discount,
        stars: obj.stars,
        sort: obj.sort,
        status: obj.status
      };
      // console.log(this.toChangeRow);
    },
    getPhoto: async function(row) {
      let data = await this._axios
        .get(`/ycwAdmin/attraction/getPhoto?attrId=${row.id}`)
        .then(data => data.data.data);
      // console.log(data);
      this.photoList = {
        id: row.id,
        name: row.title,
        list: data
      };
    },
    refresh: async function() {
      let data = await this._axios
        .get(`/ycwAdmin/attraction/getList?page=${this.page_now}&pageTotal=3`)
        .then(data => data.data.data);
      // console.log(data);
      // this.page_now = data.page_now;
      this.total = data.allPage * 3;
      this.attrList = data.attrList;
      this.page_num = 3;
      this.dialogFormVisible = false;
      this.showAddDialog = false;
    }
  },
  mounted: async function() {
    this.refresh();
  }
};
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 10px;
}
</style>